<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏天地 - 探索游戏的魅力</title>
    <link rel="stylesheet" href="css/main.css">
    <style>
        .carousel {
            position: relative;
            width: 100%;
            height: 400px;
            overflow: hidden;
            margin: 20px 0;
        }

        .carousel-inner {
            display: flex;
            transition: transform 0.5s ease;
            height: 100%;
        }

        .carousel-item {
            min-width: 100%;
            height: 100%;
            position: relative;
        }

        .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover !important;
        }

        .carousel-caption {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
        }

        .carousel-controls {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
        }

        .carousel-control {
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
            border-radius: 50%;
            font-size: 18px;
        }

        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 40px 0;
        }

        .feature-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            transition: transform 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-5px);
        }

        .feature-icon {
            font-size: 48px;
            margin-bottom: 15px;
        }
    </style>
    <style>
        .hero img {
            width: 100%;
            height: auto;
            object-fit: cover !important;
            border-radius: 12px;
        }
    </style>

    <style>
        .hero img,
        .carousel img,
        .slider img {
            width: 100%;
            height: auto;
            object-fit: cover !important;
            border-radius: 12px;
        }
    </style>


    <style>
        .hero,
        .carousel,
        .slider {
            width: 100%;
            height: 600px;
            /* 固定轮播高度 */
            overflow: hidden;
        }

        .hero img,
        .carousel img,
        .slider img {
            width: 100%;
            height: 100%;
            object-fit: cover !important;
        }
    </style>


    <style id="hero-letterbox-fix">
        /* 轮播完整显示（允许留白） */
        .hero,
        .carousel,
        .slider {
            width: 100%;
            height: 600px !important;
            /* 固定高度，便于统一展示 */
            display: flex;
            align-items: center;
            justify-content: center;
            background: white;
            /* 留白用背景，可按需改成透明或其他颜色 */
        }

        .hero img,
        .carousel img,
        .slider img {
            width: 100%;
            height: 100%;
            object-fit: contain !important;
            /* 显示完整，不裁剪 */
            object-position: center center !important;
        }

        /* 如果轮播使用的是 background-image 的方式，也一起覆盖 */
        .hero .slide,
        .carousel .slide,
        .slider .slide,
        .hero .swiper-slide,
        .carousel .swiper-slide,
        .slider .swiper-slide {
            background-size: contain !important;
            background-position: center center !important;
            background-repeat: no-repeat !important;
        }
    </style>

</head>

<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-logo">

                <span>游戏天地</span>
            </div>
            <ul class="nav-menu">
                <li><a href="index.html">首页</a></li>
                <li><a href="html/game-research/index.html">游戏研究</a>
                    <a href="games/index.html">游戏专栏</a>
                </li>

            </ul>
            <div class="nav-toggle">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </nav>

    <!-- 轮播图 -->
    <div class="carousel">
        <div class="carousel-inner" id="carouselInner">
            <div class="carousel-item">
                <img src="images/sword-story.jpg" alt="仙剑奇侠传">
                <div class="carousel-caption">
                    <p>经典仙侠游戏的传奇故事</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="images/yuanshen.jpg" alt="原神">
                <div class="carousel-caption">

                    <p>国产开放世界游戏的巅峰之作</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="images/takefu.jpg" alt="逃离塔科夫">
                <div class="carousel-caption">

                    <p>搜打撤游戏的巅峰之作</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="images/stardew-valley.jpg" alt="星露谷物语">
                <div class="carousel-caption">

                    <p>2D农场模拟经营 沙盒四巨头之一</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="images/minecraft.jpg" alt="我的世界">
                <div class="carousel-caption">

                    <p>沙盒四巨头之一 伟大无需多言</p>
                </div>
            </div>
        </div>
        <div class="carousel-controls">
            <button class="carousel-control" onclick="moveCarousel(-1)">‹</button>
            <button class="carousel-control" onclick="moveCarousel(1)">›</button>
        </div>
    </div>

    <!-- 特色功能 -->
    <div class="container">
        <h2 class="section-title">网站特色</h2>
        <div class="features">
            <div class="feature-card">
                <div class="feature-icon">🎮</div>
                <h3>专业游戏分析</h3>
                <p>深度解析各类游戏的文化内涵与设计理念</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">📚</div>
                <h3>完整游戏资料</h3>
                <p>提供详尽的游戏背景、角色介绍和攻略指南</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">🎨</div>
                <h3>精美视觉设计</h3>
                <p>采用现代化设计风格，带来优质浏览体验</p>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-content">
            <p>&copy; 2025 游戏天地. 所有权利保留.</p>
            <p>探索游戏文化，传播游戏魅力</p>
        </div>
    </footer>

    <script>
        let currentSlide = 0;
        const slides = document.querySelectorAll('.carousel-item');
        const totalSlides = slides.length;

        function moveCarousel(direction) {
            currentSlide = (currentSlide + direction + totalSlides) % totalSlides;
            const carouselInner = document.getElementById('carouselInner');
            carouselInner.style.transform = `translateX(-${currentSlide * 100}%)`;
        }

        // 自动轮播
        setInterval(() => moveCarousel(1), 5000);

        // 移动端导航切换
        const navToggle = document.querySelector('.nav-toggle');
        const navMenu = document.querySelector('.nav-menu');

        navToggle.addEventListener('click', () => {
            navMenu.classList.toggle('active');
        });
    </script>
</body>

</html>